<template>
  <div>
    <!-- 表格table -->
    <el-table
      ref="singleTable"
      :data="tableData"
      highlight-current-row
      style="width: 100%"
      v-loading="loading"
      element-loading-text="数据加载中"
      element-loading-spinner="el-icon-loading"
    >
      <el-table-column type="index" width="100" label="序号"></el-table-column>
      <el-table-column label="分类名称">
        <template slot-scope="scope">
          <span v-show="!scope.row.isedit">{{ scope.row.cateName }}</span>
          <el-input
            v-show="scope.row.isedit"
            v-model="scope.row.cateName"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="是否开启">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.state" :disabled="!scope.row.isedit">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope)">{{
            scope.row.isedit ? "确定" : "编辑"
          }}</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[6, 12, 18]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
// 引api接口
import { catelist, delcate, editcate } from "../../../../api/apis";
export default {
  data() {
    return {
      tableData: [], //表格数据
      state: "", //控制开关的
      currentPage: 1, //当前页码
      pageSize: 6, //每页显示的条数
      total: 1, //总条数
      loading: true, //显示加载
    };
  },

  methods: {
    //-------------------------------------------表格table操作的函数-----------------------------------------
    // 编辑按钮函数
    handleEdit(scope) {
      if (scope.row.isedit) {
        // scope.row.isedit=true则发请求
        // scope.row传的是一个对象组
        editcate(scope.row).then((res) => {
          if (res.data.code == 0) {
            //修改分类成功
            this.$message({
              message: "美团系统，商品分类已修改",
              type: "success",
            });
            scope.row.isedit = false; //关闭编辑状态
          }
        });
      } else {
        // 打开编辑状态
        scope.row.isedit = true;
      }
    },
    // 删除按钮函数
    handleDelete(scope) {
      // scope里面有每行数据的id可以打印看看;
      this.$confirm("此操作将永久删除该分类, 是否继续?", "美团提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 调用删除商品分类的函数
          delcate(scope.row.id).then((res) => {
            if (res.data.code == 0) {
              this.refreshTable();
            }
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //-----------------------------------------分页操作的函数-------------------------------------------------------
    // 每页显示的条数发生变化
    handleSizeChange(newpageSize) {
      // 让当前每页显示的页面条数等于变化之后新的每页显示的页面条数
      this.pageSize = newpageSize;
      this.refreshTable(); //调用封装的函数
    },
    // 当前页码发生变化
    handleCurrentChange(newcurrentPage) {
      // 让当前页码等于变化之后新的页码
      this.currentPage = newcurrentPage;
      this.refreshTable(); //调用封装的函数，重新渲染，让表格的数据发送改变
    },

    //封装函数，刷新表格的数据，发请求渲染表格
    refreshTable() {
      this.loading = true; //一进页面就显示加载
      catelist(this.currentPage, this.pageSize).then((res) => {
        let DataArr = res.data.data; //数据数组
        for (let i = 0; i < DataArr.length; i++) {
          DataArr[i].state = DataArr[i].state == 1; //让state=true或者false
          DataArr[i].isedit = false; //手动添加属性
        }
        this.tableData = DataArr;
        this.total = res.data.total;
        this.loading = false; //数据出来就让加载关掉
      });
      //调用接口
    },
  },

  created() {
    // 进去页面就渲染表格数据
    this.refreshTable(); //调用上面封装的函数
  },
};
</script>

<style lang="less" scoped>
</style>